<template>
	<section class="feedback">
		<main>
			<mt-header fixed title="用户反馈">
				<mt-button slot="left" icon="back"  @click="goBack">
					<a class="white" href="javascript:;">返回</a>
				</mt-button>
			</mt-header>
			<div class="content pt10">
				<div class="ml10 mr10 br4">
					<mt-field label="" placeholder="多谢您给我们提供宝贵的意见或建议,请留下您的联系方式方便我们反馈给您结果" type="textarea" rows="4" v-model="feedbackInfo"></mt-field>
					<p class="tr lh40 pr10 fontc3">字符数须小于200，当前字符数{{feedbackInfo.length}}</p>
				</div>
				<div class="ml10 mr10">
					<mt-field label="" placeholder="请输入QQ、微信或者手机号" v-model="userPhone"></mt-field>
				</div>
			</div>
			<div class="ml10 mr10 mt30" @click="setFeedback">
				<mt-button type="primary" size="large">提 交</mt-button>
			</div>
		</main>
		<!-- <p class="about"><a  href="javascript:;" @click="aboutUs">关于我们 | </a> <a :href="system === 'ios' ? 'https://itunes.apple.com/cn/app/id1316390255?mt=8' : 'https://jyt-dload.oss-cn-shanghai.aliyuncs.com/apk/app-jytgf5-release-1.0.apk'">关于我们</a></p> -->
	</section>
</template>
<script>

import {MessageBox,Toast,Indicator,Actionsheet,Field,Button,Picker} from 'mint-ui'
import Vue from 'vue'
Vue.component({Field,Button,Picker});

import axios   from 'axios'
import {mapState} from 'vuex'
export default {
	name : "Feedback",
	data () {
		return {
			feedbackInfo: "",
			userPhone: "",
		}
	},
	created () {

	},
	computed : {
		...mapState(['system'])
	},
	methods : {
		setFeedback () {
			if (this.feedbackInfo.trim().length > 200) {
				Toast('反馈内容过长···');
				return;
			}
			if (this.userPhone.trim().length > 60) {
				Toast('账户信息过长···');
				return;
			}
			Indicator.open({
                text: "请稍候...",
                spinnerType: "fading-circle"
            });
			axios({
				methods: "post",
				url: '/user/userFeedback/insert.do',
				params: {
					content: this.feedbackInfo.trim(),
					userPhone: this.userPhone.trim(),
				}
			})
			.then((res) => {
				Indicator.close();
				res = res.data;
				if (res.code == 200) {
					this.feedbackInfo = "";
					this.userPhone = "";
					Toast('反馈成功，感谢您的宝贵意见');
				} else {
					Toast(res.msg);
				}
			})
		},
		goBack () {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/mine');
		},
		aboutUs() {
			const url = window.system === 'ios' ? 'https://itunes.apple.com/cn/app/id1316390255?mt=8' : 'https://jyt-dload.oss-cn-shanghai.aliyuncs.com/apk/app-jytgf5-release-1.0.apk'
			window.location.href = url
		}
	}
}
</script>
<style scoped>
    .content{
        margin-top: 40px;
        border-top: 1px solid #e2e2e2;
    }
	.content div{
		border-radius: 4px;
	}
	.about{
		text-align: left;
		margin-top: 50px;
		margin-left: 10px;
	}
	.about a{
		color: #ddd;
	}
</style>